import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { VxeColumnSlotTypes } from 'vxe-table'
import type { AnyObject } from '@/types'
import DrawerAdd from './DrawerAdd'
import { Button } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'
import { getInsureCompanyRuleList } from '@/api/insureCompanyRule'



@Component
export class InsuranceCompanyView extends TableRender {

    showDrawer = false

    area = [] as any

    tableColumnConfigOld = () => [
        { type: 'checkbox', width: 50, fixed: 'left' },
        {
            field: 'ruleCode',
            title: '规则ID',
        },
        {
            field: 'ruleName',
            title: '规则名称',
        },
        {
            field: 'productName',
            title: '保险产品',
        },
        {
            field: 'relatedInsuranceCompany',
            title: '关联方案'
        },
        {
            field: 'createName',
            title: '创建人',
            params: {
                tooltip: {
                    text: (row) => row.createName,
                    content: (row) => `手机号：${row.phone}`
                }
            },
            slots: {
                default: 'tooltip'
            }
        },
        {
            field: 'createTime',
            title: '创建时间',
            width: 160
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            params: {
                buttons: [
                    {
                        text: '查看详情',
                        event: (row) => {}
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ]  as TableRenderColumnTypes<any>

    
    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInsureCompanyRuleList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    onShowDrawer() {
        this.showDrawer = true
    }

    renderTitle() {
        return <div class="flex items-center justify-between px-20px">
            <div>规则列表</div>
            <Button type="primary" icon={h(PlusOutlined)} onClick={this.onShowDrawer}>新建保司规则</Button>
        </div>
    }
    render() {
        return <div>
            {this.renderTitle()}
            {super.renderTable()}
            <DrawerAdd v-model:show={this.showDrawer} />
        </div>
    }
}

export default toNative<{}, {}>(InsuranceCompanyView)